<template>
	<view class="container">
		<view class="links-wrapper">
			<!-- 百度网盘 -->
			<view v-if="links.baidu" class="link-card" @click="copyLink(links.baidu, '百度网盘')">
				<view class="link-icon" style="background-color: #dbeafe;">
					<text class="iconfont icon-baiduyunpan" style="color: #06A7FF;font-size: 24px;" />
				</view>
				<view class="link-info">
					<text class="link-name">百度网盘</text>
					<text class="link-url">{{ links.baidu }}</text>
				</view>
				<text class="iconfont icon-copy">📋</text>
			</view>

			<!-- 阿里云盘 -->
			<view v-if="links.aliyun" class="link-card" @click="copyLink(links.aliyun, '阿里云盘')">
				<view class="link-icon" style="background-color: #fff7ed;">
					<text class="iconfont icon-aliyunpan" style="color: #6666FF;font-size: 24px;" />
				</view>
				<view class="link-info">
					<text class="link-name">阿里云盘</text>
					<text class="link-url">{{ links.aliyun }}</text>
				</view>
				<text class="iconfont icon-copy">📋</text>
			</view>

			<!-- 迅雷云盘 -->
			<view v-if="links.xunlei" class="link-card" @click="copyLink(links.xunlei, '迅雷云盘')">
				<view class="link-icon xunlei-bg" style="background-color: #ECFDF5;">
					<text class="iconfont icon-xunlei" style="color: #1390F2;" />
				</view>
				<view class="link-info">
					<text class="link-name">迅雷云盘</text>
					<text class="link-url">{{ links.xunlei }}</text>
				</view>
				<text class="iconfont icon-copy">📋</text>
			</view>

			<!-- 夸克网盘 -->
			<view v-if="links.quark" class="link-card" @click="copyLink(links.quark, '夸克网盘')">
				<view class="link-icon" style="background-color: #fff7ed;">
					<text class="iconfont icon-kuake" style="color: #3A25DD;" />
				</view>
				<view class="link-info">
					<text class="link-name">夸克网盘</text>
					<text class="link-url">{{ links.quark }}</text>
				</view>
				<text class="iconfont icon-copy">📋</text>
			</view>

			<!-- 蓝奏云 -->
			<view v-if="links.lanzou" class="link-card" @click="copyLink(links.lanzou, '蓝奏云')">
				<view class="link-icon" style="background-color: #F4EADF;">
					<image src="/static/lanzou.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;" />
				</view>
				<view class="link-info">
					<text class="link-name">蓝奏云</text>
					<text class="link-url">{{ links.lanzou }}</text>
				</view>
				<text class="iconfont icon-copy">📋</text>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view v-if="!hasAnyLink" class="empty-state">
			<text class="empty-text">暂无下载链接</text>
		</view>

		<view class="tips">
			<text class="tips-text">💡 点击卡片即可复制链接</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import api from '@/utils/api.js'
	// 下载数据
	const links = ref({});

	// 判断是否有任何链接
	const hasAnyLink = computed(() => {
		return links.value.baidu ||
			links.value.aliyun ||
			links.value.xunlei ||
			links.value.quark ||
			links.value.lanzou;
	});

	// 复制链接
	const copyLink = (link, platform) => {
		if (!link) return;

		uni.setClipboardData({
			data: link,
			success: () => {
				uni.showToast({
					title: '链接已复制',
					icon: 'success',
					duration: 2000
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败，请重试',
					icon: 'none'
				});
			}
		});
	};

	// 页面加载时获取数据
	onLoad(async (options) => {
		try {
			const res = await api.app.getLinks(options.id);
			links.value = res;
		} catch (e) {
			uni.showToast({
				title: '获取下载链接失败',
				icon: 'none'
			});
		}
	});

	// 加载下载数据
	const loadDownloadData = () => {
		// 模拟后端返回的数据
		// links.value = {
		// 	id: 2,
		// 	sid: 2,
		// 	baidu: 'https://pan.baidu.com/s/1pvpz8SmOK3rK36FDWhkqxw?pwd=f38p',
		// 	aliyun: 'https://www.alipan.com/s/Wp3AKh6WYxP',
		// 	xunlei: '',
		// 	quark: 'https://pan.quark.cn/s/80a752845d9e?pwd=ycDt',
		// 	lanzou: '',
		// 	createdAt: '2025-10-14T02:08:07.000+00:00'
		// };

		// 实际使用时，应该调用API获取数据

	};
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F0F0F0;
		padding: 40rpx 30rpx;
	}

	/* 头部 */
	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #1f2937;
		display: block;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #6b7280;
		display: block;
	}

	/* 链接列表 */
	.links-wrapper {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/* 链接卡片 */
	.link-card {
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.link-card:active {
		transform: scale(0.98);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	}

	/* 图标 */
	.link-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
		flex-shrink: 0;
	}

	/* .baidu-bg {
		background: linear-gradient(135deg, #2932E1 0%, #2196F3 100%);
	}

	.aliyun-bg {
		background: linear-gradient(135deg, #FF6A00 0%, #FF8E3C 100%);
	}

	.xunlei-bg {
		background: linear-gradient(135deg, #0C7CFF 0%, #1E90FF 100%);
	}

	.quark-bg {
		background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
	}

	.lanzou-bg {
		background: linear-gradient(135deg, #00B894 0%, #00CEC9 100%);
	} */

	/* 链接信息 */
	.link-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		overflow: hidden;
	}

	.link-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #1f2937;
	}

	.link-url {
		font-size: 24rpx;
		color: #9ca3af;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 复制图标 */
	.icon-copy {
		font-size: 40rpx;
		color: #9ca3af;
	}

	/* 空状态 */
	.empty-state {
		padding: 200rpx 30rpx;
		text-align: center;
	}

	.empty-text {
		font-size: 32rpx;
		color: #9ca3af;
	}

	/* 提示信息 */
	.tips {
		margin-top: 60rpx;
		text-align: center;
	}

	.tips-text {
		font-size: 24rpx;
		color: #9ca3af;
	}
</style>